<template>
  <view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
    <!-- 状态栏占位 -->
    <view class="nav-content">
      <!-- 返回按钮 -->
      <view v-if="showBack" class="nav-back" @click="handleBack">
        <image class="back-icon" src="/static/logo.png" mode="aspectFit" />
      </view>

      <!-- 标题 -->
      <view class="nav-title" :style="{ color: titleColor }">
        {{ title }}
      </view>

      <!-- 右侧插槽 -->
      <view class="nav-right">
        <slot name="right"></slot>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted } from "vue";

// 定义组件属性
const props = defineProps({
  title: {
    type: String,
    default: "标题",
  },
  showBack: {
    type: Boolean,
    default: true,
  },
  titleColor: {
    type: String,
    default: "#000000",
  },
});

// 状态栏高度
const statusBarHeight = ref(0);

// 获取状态栏高度
onMounted(() => {
  const systemInfo = uni.getSystemInfoSync();
  statusBarHeight.value = systemInfo.statusBarHeight || 0;
});

// 返回方法
const handleBack = () => {
  uni.navigateBack({
    delta: 1,
    fail: () => {
      uni.switchTab({
        url: "/pages/index/index",
      });
    },
  });
};
</script>

<style lang="scss" scoped>
.nav-bar {
  width: 100%;
  background-color: #ffffff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 999;

  .nav-content {
    height: 100rpx;
    display: flex;
    align-items: center;
    position: relative;

    .nav-back {
      padding: 0 15rpx;
      height: 100%;
      display: flex;
      align-items: center;

      .back-icon {
        width: 20rpx;
        height: 20rpx;
      }
    }

    .nav-title {
      position: absolute;
      left: 0;
      right: 0;
      text-align: center;
      font-size: 16rpx;
      font-weight: 500;
    }

    .nav-right {
      margin-left: auto;
      padding-right: 15rpx;
    }
  }
}
</style>
